// 导入基础库
import React from 'react'
import { connect } from 'umi'
// 导入配置参数
// 导入处理函数
import xl from '../../utils/xlsx'
// 导入UI组件
import { PageContainer } from '@ant-design/pro-layout'
import Setp1 from './import_component/setp1'
import Setp2 from './import_component/setp2'
import Setp3 from './import_component/setp3'
// 导入LESS样式
// import style from './index.less'

const PageView = (props) => {
  // 初始化参数------------------------------------------------
  const { ui, table: tb, socketio: io, dispatch: dp } = props

  // 组件参数
  const page_props = {
    tabList:
      [
        { tab: '(1).导入表格文件', key: '1', },
        { tab: '(2).关联表头标签', key: '2', disabled: tb.imp_data.length === 0 ? true : false },
        { tab: '(3).检查&录入数据', key: '3', disabled: tb.imp_data.length === 0 ? true : tb.imp_table_data.length === 0 ? true : false },
      ],
    fixedHeader: true,
    affixProps: { offsetTop: 48 }
  }

  // 组件事件处理函数
  const onTabChange = (id) => {
    if (id === '3') xl.save_tags(tb, dp)
    dp({ type: 'ui/save', payload: { imp_tab_id: id } })
  }

  // 渲染UI组件------------------------------------------------
  return (
    <PageContainer
      {...page_props}
      onTabChange={onTabChange}
      tabActiveKey={ui.imp_tab_id}
    >
      {(() => {
        switch (ui.imp_tab_id) {
          case "1": return <Setp1 />; break;
          case "2": return <Setp2 />; break;
          case "3": return <Setp3 />; break;
          default: return null;
        }
      }
      )()}
    </PageContainer >
  )
}

export default connect(
  ({ ui, table, socketio }) => ({ ui, table, socketio })
)(PageView)